import QtQuick 1.0

Item {
    id: wordEntryItem
    width: parent.width
    height: wordEntry.height
    property string defaultText: "----"
    property string stateReady: "readyToSubmit"
    property int count

    Image {
        id: wordEntry
        source: "assets/widecloud.png"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }

    Row {
        anchors.verticalCenter: wordEntry.verticalCenter
        width: parent.width

        NumberCloud {
            id: numCloud
            num: count + 1
        }

        // Word text entry
        TextInput {
            id: textInput
            font.family: throwHands.name
            font.pointSize: 11
            font.letterSpacing: 30
            font.capitalization: Font.AllUppercase
            maximumLength: 4
            text: wordEntryItem.defaultText
            focus: true
            horizontalAlignment: "AlignHCenter"
            width: parent.width - (numCloud.width + arrow.width)

            onTextChanged: {
                if (textInput.text != wordEntryItem.defaultText && textInput.text.length == 4) {
                    wordEntryItem.state = wordEntryItem.stateReady
                } else {
                    wordEntryItem.state = ""
                }
            }

            onActiveFocusChanged: {
                if (textInput.activeFocus) {
                    if (textInput.text == wordEntryItem.defaultText) {
                        textInput.text = ""
                    }
                } else {
                   if (textInput.text == "") {
                        textInput.text = wordEntryItem.defaultText
                    }
                }
            }
        }

        // Button to kick off submitting guess
        Image {
            id: arrow
            source: "assets/letsgo.png"
            opacity: 0.5
            MouseArea {
                id: arrowMouseArea
                anchors.fill: parent
            }
        }
    }

    states: [
        State {
            name: "readyToSubmit"
            PropertyChanges {
                target: arrow
                opacity: 1
            }
            PropertyChanges {
                target: arrowMouseArea
                onClicked: {
                    textInput.focus = false
                    arrow.focus = true
                    game.submitGuess(textInput.text);
                }
            }
        }
    ]

    PropertyAnimation on x {
        to: 0
        duration: 500
    }

    function clear() {
        textInput.text = defaultText
    }
}
